<template>
    <div>
        <div v-if="currentPanel == 'list'">
            <!--搜索框-->
            <div>
                <el-card class="box-card">
                    <el-form size="small" :inline="true" :model="queryData" class="demo-form-inline"
                             label-width="100px">
                        <el-form-item>
                            <el-input v-model="queryData.name" placeholder="搜索活动名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="queryData.status" placeholder="活动状态">
                                <!--            <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>-->
                                <el-option label="未开始" value="000"></el-option>
                                <el-option label="进行中" value="111"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-date-picker
                                    v-model="queryData.data"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="活动开始日期"
                                    end-placeholder="活动结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="small" type="primary" @click="queryDataHandle">查询</el-button>
                            <el-button size="small">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
                <div class="interspaceH"></div>
                <!--table-->
                <div v-if="currentPanel=='list'">
                    <el-card class="box-card">
                        <!--新建裂变活动-->
                        <el-button type="primary" @click="currentHandler('add')">+ 新建裂变活动</el-button>
                        <div class="interspaceH"></div>
                        <el-table
                                :data="tableData"
                                style="width: 100%">
                            <el-table-column
                                    prop="name"
                                    label="活动名称"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="chengyuan"
                                    label="使用成员"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="status"
                                    label="活动状态">
                              <template slot-scope="scope">
                                <el-tag v-for="item in scope.row.status" :key="item" style="margin-right: 10px">{{ item }}</el-tag>
                              </template>
                            </el-table-column>
                            <el-table-column
                                    prop="zhuli"
                                    label="助力裂变标签">
                              <template slot-scope="scope">
                                <el-tag v-for="item in scope.row.zhuli" :key="item" style="margin-right: 10px">{{ item }}</el-tag>
                              </template>
                            </el-table-column>
                            <el-table-column
                                    prop="huodong"
                                    label="活动客户标签">
                              <template slot-scope="scope">
                                <el-tag v-for="item in scope.row.huodong" :key="item" style="margin-right: 10px">{{ item }}</el-tag>
                              </template>
                            </el-table-column>
                            <el-table-column
                                    prop="saoma"
                                    label="扫码添加人数">
                            </el-table-column>
                            <el-table-column
                                    prop="data"
                                    label="活动时间">
                            </el-table-column>
                            <el-table-column
                                    label="操作">
                                <template slot-scope="scope">
                                    <el-button @click="detailHandle(scope.row)" type="text" size="small">推广</el-button>
                                    <el-button @click="currentHandler('statisti')" type="text" size="small">统计</el-button>
                                    <el-button @click="update(scope.row)" type="text" size="small">编辑</el-button>
                                    <el-button @click="detailHandle(scope.row)" type="text" size="small">更多</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--分页-->
                        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
                    </el-card>
                </div>
            </div>
            <!--编辑页面-->
            <div>
                <el-dialog :title="title" :visible.sync="updates" width="30%" :close-on-click-modal="false">
                    <el-form label-width="120px" :model="editForm" ref="editForm">
                        <el-form-item label="活动名称" prop="name">
                            <el-input size="small" v-model="editForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="使用成员" prop="chengyuan">
                            <el-input size="small" v-model="editForm.chengyuan"></el-input>
                        </el-form-item>
                        <el-form-item label="活动状态" prop="status">
                            <el-input size="small" v-model="editForm.status"></el-input>
                        </el-form-item>
                        <el-form-item label="助力裂变标签" prop="zhuli">
                            <el-input size="small" v-model="editForm.zhuli"></el-input>
                        </el-form-item>
                        <el-form-item label="活动客户标签" prop="huodong">
                            <el-input size="small" v-model="editForm.huodong"></el-input>
                        </el-form-item>
                        <el-form-item label="扫码添加人数" prop="saoma">
                            <el-input size="small" v-model="editForm.saoma"></el-input>
                        </el-form-item>
                        <el-form-item label="活动时间" prop="data">
                            <el-input size="small" v-model="editForm.data"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="small" @click="closeDialog">取消</el-button>
                        <el-button size="small" type="primary" class="title" @click="submitForm('editForm')">保存
                        </el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
        <div v-if="currentPanel == 'add'">
            <add @currentHandler=currentHandler></add>
        </div>
        <div v-if="currentPanel == 'statisti'">
          <statisti @currentHandler=currentHandler></statisti>
        </div>
    </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import add from "@/views/masket/fission/add"
import statisti from "@/views/masket/fission/statisti"
export default {
    components: {
        add,
        statisti,
        Pagination
    },
    name: "fission",
    data() {
        return {
            currentPanel: 'list',
            //编辑菜单名
            title: '编辑',
            //编辑页面
            updates: false,
            //搜索
            queryData: {
                name: '',
                status: '',
                data: '',
            },
            //表格
            tableData: [{
                name: '裂变活动',
                chengyuan: '员工1',
                status: ['进行中'],
                zhuli: ['线下门店'],
                huodong: ['中秋活动'],
                saoma: '0',
                data: '2021-10-21 10:10:10',
            }],
            editForm: {
                name: '裂变活动',
                chengyuan: '员工1',
                status: '进行中',
                zhuli: '线下门店',
                huodong: '中秋活动',
                saoma: '0',
                data: '2021-10-21 10:10:10'
            },
            formInline: {
                page: 1,
                limit: 10,
                varLable: '',
                varName: '',
                token: localStorage.getItem('logintoken')
            },
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 10,
                total: 1
            }
        }
    },
    methods: {
        currentHandler(type) {
            this.currentPanel = type
        },

        update() {
            this.updates = true
        },
        closeDialog() {
            this.updates = false
        },
        submitForm() {
            this.$message({
                message: '保存成功',
                type: 'success'
            })
            this.updates = false
        },
        //查询
        queryDataHandle() {

        },
        // 获取公司列表
        getdata(parameter) {
            this.loading = true
            // 模拟数据开始
            let res = {
                code: 0,
                msg: null,
                count: 1,
                tableData: [
                    {
                        name: '裂变活动',
                        chengyuan: '员工1',
                        status: '进行中',
                        zhuli: '线下门店',
                        huodong: '中秋活动',
                        saoma: '0',
                        data: '2021-10-21 10:10:10',
                    },
                ]
            }
            this.loading = false
            this.listData = res.data
            this.pageparm.currentPage = this.formInline.page
            this.pageparm.pageSize = this.formInline.limit
            this.pageparm.total = res.count
            // 模拟数据结束
        },
        // 分页插件事件
        callFather(parm) {
            this.formInline.page = parm.currentPage
            this.formInline.limit = parm.pageSize
            this.getdata(this.formInline)
        },
        detailHandle(row) {

        }
    }
}
</script>

<style scoped>

</style>
